<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>倒计时</title>
    <style>
        #countdown {
            width: 300px;
            font: 16px/1.5 \5fae\8f6f\96c5\9ed1;
            text-align: center;
            margin: 10px auto;
            padding: 20px 0;
            color: #fff;
            background: #000;
        }

        span {
            width: 80px;
            background: #fff;
            color: #000;
            line-height: 2;
            border: 2px solid #b4b4b4;
            padding: 0 10px;
            margin: 0 10px;
        }

        input {
            width: 283px;
            height: 50px;
            cursor: pointer;
            margin-top: 20px;
            background: greenyellow;
            border-radius: 10px;
            font-weight: 800;
            font-size: large;
        }

        input.cancel {
            background: red;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementsByTagName("input")[0];
            var timer = null;

            oBtn.onclick = function () {
                if (this.className == "") {
                    timer = setInterval(update, 1000);
                    this.className = "cancel";
                    this.value = "取消";
                    update();
                } else {
                    clearInterval(timer);
                    this.className = "";
                    this.value = "启动";
                }
            }

            function update() {
                var aSpan = document.getElementsByTagName("span");
                var Remain = Number(aSpan[0].innerHTML.replace(/^0/, '')) * 60 + Number(aSpan[1].innerHTML.replace(/^0/, ''));
                console.log(Remain)
                if (Remain <= 0) {
                    clearInterval(timer);
                } else {
                    Remain--;
                    console.log(aSpan[0].innerHTML + "\t" + parseInt(Remain / 60))
                    aSpan[0].innerHTML = parseInt(Remain / 60);
                    aSpan[1].innerHTML = parseInt(Remain % 60);
                }
            }

            // function format(a) {
            //     return a.toString().replace(/^(\d)$/, '0$1')
            // }

            // function update() {
            //     var aSpan = document.getElementsByTagName("span");
            //     var oRemain = aSpan[0].innerHTML.replace(/^0/, '') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,
            //         ''));
            //         console.log(aSpan[1].innerHTML.replace(/^0/,''))
            //     if (oRemain <= 0) {
            //         clearInterval(timer);
            //         return
            //     }
            //     oRemain--;
            //     aSpan[0].innerHTML = format(parseInt(oRemain / 60));
            //     oRemain %= 60;
            //     aSpan[1].innerHTML = format(parseInt(oRemain));
            // }
        }
    </script>
</head>

<body>
    <div id="countdown">
        <span>01</span>分钟<span>10</span>秒
        <input type="button" value="启动" class="">
    </div>
</body>

</html>